<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    tabsList?: any[]
    currentTab?: string
  }>(),
  {
    tabsList: () => [],
  },
)
console.log(props)

const emit = defineEmits<{
  clickTab: [string]
}>()

function clickTab(value: string) {
  emit('clickTab', value)
}
</script>

<template>
  <div>
    <div
      v-for="tab in tabsList"
      :key="tab.value"
      :class="[tab.value === currentTab ? 'text-primary bg-primary/12' : 'text-foreground']"
      class="mb-2 h-10 flex cursor-pointer items-center gap-2 rounded-md px-2 text-sm font-medium hover:bg-muted"
      @click="clickTab(tab.value)"
    >
      <div class="text-lg" :class="[tab.icon]" />
      <div>{{ tab.label }}</div>
    </div>
  </div>
</template>
